<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jsencrypt/3.0.0/jsencrypt.min.js"></script>
		<script src="meigangAPI.js"></script>
	</head>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
		}

		header {
			background-color: #333;
			color: #fff;
			padding: 10px;
			text-align: right;
		}

		#logout-btn {
			cursor: pointer;
			padding: 5px 10px;
			background-color: #555;
			color: #fff;
			border: none;
			border-radius: 3px;
		}

		table {
			border-collapse: collapse;
			width: 100%;
		}

		th,
		td {
			border: 1px solid #ddd;
			padding: 8px;
			text-align: left;
		}

		th {
			background-color: #f2f2f2;
		}

		tr:hover {
			background-color: #f5f5f5;
		}

		.details {}
	</style>
	<body>
		<div id="app">

			<header>
				<span style="padding-right: 30px;" id="username">{{userinfo.username?userinfo.username:'未登录'}}</span>
				<button id="logout-btn" style="margin-right: 30px;" @click="setWxNumber()">设置微信号</button>
				<button id="logout-btn" @click="logout()">退出登陆</button>
			</header>
			<div v-if="localStorage.getItem('isLogin')==null">
				<div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<span>用户名</span>
					<input type="text">
					<span>密码</span>
					<input type="text">
					<button @click="userlogin">登陆</button>
				</div>
			</div>
			<div v-else>
				<div id="details-container" class="details" v-if="showDetails">
					<!-- 详情列表 -->
					<table v-if="dataDetails">
						<thead>
							<tr>
								<th v-for="(v,k) in Object.keys(dataDetails)" :key="k">{{v}}</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td :row_index="k" v-for="(v,k) in dataDetails" :key="k">
									{{v}}
								</td>
							</tr>
						</tbody>
					</table>

				</div>
				<table v-if="chaxunlist.length">
					<thead>
						<tr>
							<th v-for="(v,k) in Object.keys(chaxunlist[0])" :key="k">{{v}}</th>
						</tr>
					</thead>
					<tbody>
						<tr :row_index="k" @click="showDetailsHandle(k)" v-for="(v,k) in chaxunlist" :key="k">
							<td v-for="(v,k) in v">
								{{v}}
							</td>
						</tr>
					</tbody>
				</table>
			</div>

		</div>
	</body>
	<script type="module">
		import {
			createApp,
			ref,
			onBeforeUnmount,
			onMounted,
			onUnmounted
		} from 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.min.js'

		createApp({
			setup() {
				let userinfo = ref({})
				let chaxunlist = ref([])
				let rows = ref([])
				let dataDetails = ref({})
				let showDetails = ref(0)

				function showDetailsHandle(ind) {
					bindHover(ind)
					showDetails.value = !showDetails.value
					// startOrder()
				}


				async function userlogin() {
					await login('18535133242', '123456', async (e) => {
						userinfo.value = e.data
						localStorage.setItem("isLogin", true)
						localStorage.setItem("id", userinfo.value.id)
						localStorage.setItem("telphone", userinfo.value.telphone)
						localStorage.setItem("token", `Bearer ${userinfo.value.token}`)
						localStorage.setItem("username", userinfo.value.username)
						getAllData()
					})
				}

				async function getAllData() {
					console.log(userinfo.value.id);
					let {
						data: result
					} = await chaxun(userinfo.value.id, 'oSmlb48FBkWbAeOOMtXAj4R00SiM')
					chaxunlist.value = result

				}

				async function bindHover(id) {
					dataDetails.value = await watchDetails(id)
					// console.log(r);
					// const pElement = targetElement.querySelector('p');
					// let pElement = document.getElementById('details-content')
					// if (pElement) {
					// 	// Update the content of the p element
					// 	pElement.innerHTML = JSON.stringify(r);
					// 	pElement.style.display = 'block';
					// }

				}

				async function watchDetails(index) {
					//result[0].id
					let result1 = await xiangqing(chaxunlist.value[index].id, 'oSmlb48FBkWbAeOOMtXAj4R00SiM')
					return result1
				}



				async function startOrder() {
					console.log(dataDetails.value);
					let va =
						'8MnuqKef4cDqZte1NQpRop7wBJyS8MmPxXkZT9AWjfiH5lXqk6mpa9DF7PLcIJXZlpUxxgn385TOe8zRFq61rTNLfeq+S7AF6L9Mc2xULERCGYsVE1lophW3V4zxfdb9hCl6kCdE5A0xa3B5FrPJWhhiv3L00bzmty6Q3cyzBvI='
					let {
						data: rere
					} = await qiangdan(dataDetails.value.id, 0, userinfo.value.id,
						'oSmlb48FBkWbAeOOMtXAj4R00SiM', dataDetails.value.opdate, va)
				}

				async function getCar() {
					let allcar = await getcar(this.userinfo.value.id, 'oSmlb48FBkWbAeOOMtXAj4R00SiM')
					return allcar.data
				}

				function logout() {
					console.log(userinfo.value);
				}

				function beforeunloadHandler() {
					console.log(1);
					localStorage.removeItem('isLogin');
				}

				onMounted(() => {
					window.addEventListener("beforeunload", (e) => beforeunloadHandler(e));
				})

				onUnmounted(() => {
					window.removeEventListener("beforeunload", (e) => beforeunloadHandler(e));
				})

				return {
					userinfo,
					chaxunlist,
					logout,
					localStorage,
					userlogin,
					bindHover,
					dataDetails,
					showDetails,
					showDetailsHandle
				}
			}
		}).mount('#app')
	</script>


</html>